<template>
	<view class="main">
		<u-navbar :is-back="false" title=" " :background="background" :border-bottom="false">
			<view class="header_tap">
				<u-tabs 
				ref="uTabs"
				:gutter="gutter"
				:list="list" 
				font-size="28"
				gutter="20"
				:bold="false"
				inactive-color="#ffffff"
				active-color="#ffffff"
				bg-color="transparent" 
				:active-item-style="active_style"
				:current="current" 
				@change="changeTab"></u-tabs>
				<image src="../../static/image/ico/search.png" mode="" @tap="toPage('/pages/Search/index')"></image>
			</view>
		</u-navbar>
		<view class="content">
			<swiper class="swiper" :current="swiperCurrent" @change="changeSwiper">
			    <swiper-item>
					<view class="swiper-item">
						<scroll-view 
						class="scroll" 
						:scroll-y="true"
						:refresher-enabled="true"
						:refresher-triggered="triggered"
						:refresher-threshold="100"
						@refresherrefresh="onRefresh"
						@scrolltolower="onreachBottom">
							<block v-for="(item,index) in 10" :key="index">
								<JobItem></JobItem>
							</block>
						</scroll-view>
					</view>
			    </swiper-item>
			    <swiper-item>
			        <view class="swiper-item">
						<view class="swiper-item">
							<view class="ad">
								<image @tap="toPage('/pages/Release/index')" src="../../static/image/ad.png" mode=""></image>
							</view>
							<scroll-view 
							class="scroll scroll_index" 
							:scroll-y="true"
							:refresher-enabled="true"
							:refresher-triggered="triggered"
							:refresher-threshold="100"
							@refresherrefresh="onRefresh"
							@scrolltolower="onreachBottom">
								<block v-for="(item,index) in 10" :key="index">
									<UserCard></UserCard>
								</block>
							</scroll-view>
						</view>
			        	<!-- <scroll-view class="scroll" scroll-y @scrolltolower="onreachBottom">
			        		附近
			        	</scroll-view> -->
			        </view>
			    </swiper-item>
			    <swiper-item>
			        <view class="swiper-item">
			        	<scroll-view class="scroll" scroll-y @scrolltolower="onreachBottom">
			        		最新
			        	</scroll-view>
			        </view>
			    </swiper-item>
				<swiper-item>
				    <view class="swiper-item">
				    	<scroll-view class="scroll" scroll-y @scrolltolower="onreachBottom">
				    		全部
				    	</scroll-view>
				    </view>
				</swiper-item>
			</swiper>
		</view>
		<Nav></Nav>
	</view>
</template>

<script>
	import Nav from "@/components/Nav.vue"
	import UserCard from "@/components/UserCard.vue"
	import JobItem from "@/components/JobItem.vue"
	export default {
		components:{
			Nav,
			UserCard,
			JobItem
		},
		data() {
			return {
				background: {
					backgroundColor:"#4A90E2"
				},
				active_style:{
					fontSize:"34rpx"
				},
				// #ifdef APP-PLUS
				gutter:40,
				// #endif
				// #ifdef H5
				gutter:40,
				// #endif
				// #ifdef MP-WEIXIN
				gutter:20,
				// #endif
				list: [{
					name: '灵活用工'
				}, {
					name: '附近'
				}, {
					name: '最新'
				}, {
					name: '全部'
				}],
				current: 0,//当前tab
				swiperCurrent:0,//当前swiper
				triggered: false,//设置下拉刷新状态
				_freshing:false
			}
		},
		onLoad() {
			this.$wx.showLoading()
			setTimeout(() => {
			    this.$wx.hideLoading()
			}, 3000)
			
			//socket
			let data={value:"首页传输内容",method:"方法名称"}
			this.$socket.send(JSON.stringify(data));
			uni.onSocketMessage(function (res) {
			  console.log('收到服务器内容：' + res.data);
			});
		},
		onShow() {
			
		},
		methods: {
			changeTab(index) {
				this.current = index;
				this.swiperCurrent = index;
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			// 下拉刷新
			onRefresh(){
				if(this._freshing) return
				this._freshing = true
				this.triggered = true;
				setTimeout(() => {
					this._freshing = false
				    this.triggered = false;
				}, 3000)
			},
			// 滚动到底部
			onreachBottom(){
				
			},
			//跳转
			toPage(url){
				uni.navigateTo({
				    url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background-color: #f9f9f9;
		.header_tap{
			flex: 1;
			padding: 0 30rpx;
			/deep/.u-tab-bar{
				display: none;
			}
			display: flex;
			justify-content: space-between;
			align-items: center;
			image{
				width: 25rpx;
				height: 26rpx;
			}
		}
		.content{
			// height:calc(100vh - 140px);
			height:calc(100vh - var(--status-bar-height) - 110px);
			.swiper{
				height: 100%;
				background-color: #f9f9f9;
				padding: 0 30rpx;
				.swiper-item{
					.ad{
						padding: 30rpx 0;
						font-size: 0;
						image{
							width: 100%;
							height: 130rpx;
						}
					}
					.scroll{
						height:calc(100vh - var(--status-bar-height) - 110px);
					}
					.scroll_index{
						height:calc(100vh - var(--status-bar-height) - 110px - 190rpx);
					}
				}
			}
		}
		
	}
	
</style>
